import React, { useState } from 'react';
import { Plus, Minus, X } from 'lucide-react';
import { Modal } from '../ui/Modal';
import { Button } from '../ui/Button';
import type { Snack } from '../../types';

interface AddBoxModalProps {
  isOpen: boolean;
  onClose: () => void;
  availableSnacks: Snack[];
}

interface SelectedSnack extends Snack {
  quantity: number;
}

export function AddBoxModal({ isOpen, onClose, availableSnacks }: AddBoxModalProps) {
  const [roomNumber, setRoomNumber] = useState('');
  const [boxName, setBoxName] = useState('');
  const [selectedSnacks, setSelectedSnacks] = useState<SelectedSnack[]>([]);

  const handleAddSnack = (snack: Snack) => {
    if (!selectedSnacks.find(s => s.id === snack.id)) {
      setSelectedSnacks([...selectedSnacks, { ...snack, quantity: 1 }]);
    }
  };

  const handleRemoveSnack = (snackId: string) => {
    setSelectedSnacks(selectedSnacks.filter(s => s.id !== snackId));
  };

  const handleQuantityChange = (snackId: string, delta: number) => {
    setSelectedSnacks(selectedSnacks.map(snack => 
      snack.id === snackId
        ? { ...snack, quantity: Math.max(1, snack.quantity + delta) }
        : snack
    ));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log({
      roomNumber,
      boxName,
      snacks: selectedSnacks
    });
    onClose();
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} title="添加新盒子">
      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              房间号
            </label>
            <input
              type="text"
              value={roomNumber}
              onChange={(e) => setRoomNumber(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
              placeholder="例如: 101"
              required
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              盒子名称
            </label>
            <input
              type="text"
              value={boxName}
              onChange={(e) => setBoxName(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
              placeholder="例如: 甜点角"
              required
            />
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            添加零食
          </label>
          <div className="grid grid-cols-2 gap-4">
            <div className="border rounded-lg p-4 space-y-2">
              <h4 className="font-medium">可选零食</h4>
              <div className="space-y-2 max-h-64 overflow-y-auto">
                {availableSnacks
                  .filter(snack => !selectedSnacks.find(s => s.id === snack.id))
                  .map(snack => (
                    <div
                      key={snack.id}
                      className="flex items-center gap-2 p-2 hover:bg-gray-50 rounded-lg cursor-pointer"
                      onClick={() => handleAddSnack(snack)}
                    >
                      <img
                        src={snack.image}
                        alt={snack.name}
                        className="w-10 h-10 rounded object-cover"
                      />
                      <div className="flex-1">
                        <p className="font-medium">{snack.name}</p>
                        <p className="text-sm text-gray-600">¥{snack.price}</p>
                      </div>
                      <Plus className="h-5 w-5 text-indigo-600" />
                    </div>
                  ))}
              </div>
            </div>

            <div className="border rounded-lg p-4 space-y-2">
              <h4 className="font-medium">已选零食</h4>
              <div className="space-y-2 max-h-64 overflow-y-auto">
                {selectedSnacks.map(snack => (
                  <div
                    key={snack.id}
                    className="flex items-center gap-2 p-2 bg-gray-50 rounded-lg"
                  >
                    <img
                      src={snack.image}
                      alt={snack.name}
                      className="w-10 h-10 rounded object-cover"
                    />
                    <div className="flex-1">
                      <p className="font-medium">{snack.name}</p>
                      <p className="text-sm text-gray-600">¥{snack.price}</p>
                    </div>
                    <div className="flex items-center gap-2">
                      <button
                        type="button"
                        onClick={() => handleQuantityChange(snack.id, -1)}
                        className="p-1 hover:bg-gray-200 rounded"
                      >
                        <Minus className="h-4 w-4" />
                      </button>
                      <span className="w-8 text-center">{snack.quantity}</span>
                      <button
                        type="button"
                        onClick={() => handleQuantityChange(snack.id, 1)}
                        className="p-1 hover:bg-gray-200 rounded"
                      >
                        <Plus className="h-4 w-4" />
                      </button>
                      <button
                        type="button"
                        onClick={() => handleRemoveSnack(snack.id)}
                        className="p-1 hover:bg-red-100 text-red-600 rounded"
                      >
                        <X className="h-4 w-4" />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="flex justify-end gap-2">
          <Button type="button" variant="secondary" onClick={onClose}>
            取消
          </Button>
          <Button type="submit" variant="primary">
            创建盒子
          </Button>
        </div>
      </form>
    </Modal>
  );
}